/**
 * 消息/聊天页面组件
 */

import React, { useState, useEffect, useRef, useCallback } from 'react'
import { 
  Card, 
  List, 
  Input, 
  Button, 
  Avatar, 
  Badge, 
  Empty, 
  Divider,
  Row,
  Col,
  Typography,
  Space,
  message,
  Spin
} from 'antd'
import { 
  SendOutlined, 
  UserOutlined,
  ShoppingOutlined,
  ClockCircleOutlined
} from '@ant-design/icons'
import { useAuthStore } from '@stores/auth'
import { useNavigate } from 'react-router-dom'
import apiClient from '../services/api'
import { io } from 'socket.io-client'

const { TextArea } = Input
const { Text, Title } = Typography

// 消息类型映射
const MESSAGE_TYPES = {
  text: '文本消息',
  image: '图片消息',
  product: '商品消息',
  trade: '交易消息'
}

function ChatPage() {
  // 从认证存储中获取用户认证状态和用户信息
  const { isAuthenticated, user } = useAuthStore()
  // 用于导航到不同路由
  const navigate = useNavigate()
  // 用于滚动到消息列表底部
  const messagesEndRef = useRef(null)

  // 状态管理
  // 控制加载状态，初始为 true
  const [loading, setLoading] = useState(true)
  // 控制消息发送状态，初始为 false
  const [sending, setSending] = useState(false)
  // 存储会话列表
  const [conversations, setConversations] = useState([])
  // 存储当前选中的会话
  const [currentConversation, setCurrentConversation] = useState(null)
  // 存储当前会话的消息列表
  const [messages, setMessages] = useState([])
  // 存储用户输入的消息内容
  const [messageInput, setMessageInput] = useState('')
  // 新增：新对话输入框，存储用户输入的对方用户 ID
  const [newUserId, setNewUserId] = useState('')

  // socket.io 客户端，使用 ref 来存储实例
  const socketRef = useRef(null)

  // 初始化
  useEffect(() => {
    // 如果用户未认证，提示错误信息并导航到登录页面
    if (!isAuthenticated) {
      message.error('请先登录')
      navigate('/login')
      return
    }

    // 调用获取会话列表的函数
    fetchConversations()

    // 连接 socket.io 服务端
    if (!socketRef.current) {
      socketRef.current = io('http://localhost:5000', {
        withCredentials: true
      })
      // 登录后自动加入自己的房间
      if (user?.id) {
        socketRef.current.emit('join', user.id)
      }
      // 接收私信消息
      socketRef.current.on('private_message', (data) => {
        // 新消息推送时自动刷新会话列表
        fetchConversations()
        // 如果当前会话是该用户，自动刷新消息（但避免频繁刷新）
        if (currentConversation && data.fromUserId === (currentConversation.user1_id === user.id ? currentConversation.user2_id : currentConversation.user1_id)) {
          // 延迟刷新，避免频繁请求
          setTimeout(() => {
            fetchMessages(currentConversation)
          }, 1000)
        }
      })
    }
    // 组件卸载时断开 socket 连接
    return () => {
      if (socketRef.current) {
        socketRef.current.disconnect()
        socketRef.current = null
      }
    }
  }, [isAuthenticated, navigate, user?.id, currentConversation])

  // 当选择对话时，获取消息
  useEffect(() => {
    if (currentConversation && user) {
      console.log('🔄 useEffect: 选择新对话', currentConversation.id)
      // 调用获取消息列表的函数
      fetchMessages(currentConversation)
      // 标记会话消息为已读
      markConversationAsRead(currentConversation.id)
    }
  }, [currentConversation?.id, user?.id]) // 只依赖 conversation.id 和 user.id，避免对象引用变化

  // 自动滚动到底部
  useEffect(() => {
    // 调用滚动到底部的函数
    scrollToBottom()
  }, [messages])

  // 获取会话列表（真实API）
  const fetchConversations = async () => {
    try {
      // 设置加载状态为 true
      setLoading(true)
      
      // 使用apiClient替代直接的axios调用
      const res = await apiClient.get('/api/messages/conversations', { 
        withCredentials: true
      })
      
      if (res.data.success) {
        // 更新会话列表状态
        setConversations(res.data.data)
      }
      // 设置加载状态为 false
      setLoading(false)
    } catch (error) {
      console.error('获取会话列表失败:', error)
      message.error('获取会话列表失败')
      // 设置加载状态为 false
      setLoading(false)
    }
  }

  // 标记会话消息为已读（暂时禁用，因为后端API不匹配）
  const markConversationAsRead = async (conversationId) => {
    try {
      console.log('🔔 标记会话已读功能暂时禁用，避免触发404错误导致退出登录')
      // TODO: 后续需要修复后端API以支持按conversation_id标记已读
      // 暂时注释掉API调用，避免触发404错误
      // await apiClient.put(`/api/messages/conversation/${conversationId}/read`, {}, { 
      //   withCredentials: true
      // })
      
      // 刷新会话列表以更新未读计数
      fetchConversations()
    } catch (error) {
      console.error('标记会话已读失败:', error)
    }
  }

  // 获取消息列表（真实API）
  const fetchMessages = useCallback(async (conversation) => {
    if (!conversation || !user) {
      console.log('❌ fetchMessages: conversation或user为空', { conversation, user })
      return
    }
    
    // 验证conversation的用户ID字段
    if (!conversation.user1_id || !conversation.user2_id) {
      console.log('❌ fetchMessages: conversation缺少用户ID字段', { 
        user1_id: conversation.user1_id, 
        user2_id: conversation.user2_id,
        conversation 
      })
      return
    }
    
    try {
      const otherUserId = conversation.user1_id === user.id ? conversation.user2_id : conversation.user1_id
      console.log('🔍 fetchMessages: 获取与用户', otherUserId, '的消息', {
        currentUser: user.id,
        user1_id: conversation.user1_id,
        user2_id: conversation.user2_id,
        otherUserId
      })
      
      // 使用apiClient替代直接的axios调用
      const res = await apiClient.get(`/api/messages/${otherUserId}`, { 
        withCredentials: true
      })
      
      if (res.data.success) {
        // 更新消息列表状态
        setMessages(res.data.data.messages)
        // 移除 setCurrentConversation 调用，避免无限循环
        // setCurrentConversation({ ...conversation, ...res.data.data.conversation })
      }
    } catch (error) {
      console.error('获取消息失败:', error)
      message.error('获取消息失败')
    }
  }, [user, fetchConversations])

  // 发送消息（真实API+socket）
  const handleSendMessage = async () => {
    // 如果输入为空，直接返回
    if (!messageInput.trim()) return
    // 如果没有选择对话，提示错误信息
    if (!currentConversation) {
      message.error('请先选择一个对话')
      return
    }
    try {
      // 设置发送状态为 true
      setSending(true)
      const otherUserId = currentConversation.user1_id === user.id ? currentConversation.user2_id : currentConversation.user1_id
      
      // 使用apiClient替代直接的axios调用
      await apiClient.post('/api/messages', {
        receiver_id: otherUserId,
        content: messageInput.trim(),
        message_type: 'text'
      }, { 
        withCredentials: true
      })
      // socket 实时推送
      if (socketRef.current && user?.id) {
        socketRef.current.emit('private_message', {
          toUserId: otherUserId,
          fromUserId: user.id,
          message: messageInput.trim(),
          conversationId: currentConversation.id
        })
      }
      // 清空输入框
      setMessageInput('')
      // 重新拉取消息和会话
      fetchMessages(currentConversation)
      fetchConversations()
    } catch (error) {
      message.error('发送消息失败')
    } finally {
      // 设置发送状态为 false
      setSending(false)
    }
  }

  // 主动发起新对话
  const handleCreateConversation = async () => {
    // 如果输入为空，提示错误信息
    if (!newUserId.trim()) {
      message.error('请输入用户ID')
      return
    }
    
    // 检查输入是否为数字（用户ID）
    const userId = parseInt(newUserId.trim())
    if (isNaN(userId)) {
      message.error('请输入有效的用户ID（数字）')
      return
    }
    
    try {
      console.log('🔍 handleCreateConversation: 创建与用户', userId, '的会话')
      // 使用apiClient替代直接的axios调用，移除/api前缀
      const res = await apiClient.get(`/messages/${userId}`, { 
        withCredentials: true
      })
      
      if (res.data.success) {
        // 刷新会话列表
        fetchConversations()
        // 设置当前会话
        setCurrentConversation(res.data.data.conversation)
        // 设置消息列表
        setMessages(res.data.data.messages)
        // 清空输入框
        setNewUserId('')
        message.success('新会话已创建')
      }
    } catch (error) {
      console.error('创建会话失败:', error)
      if (error.response?.status === 404) {
        message.error('用户不存在，请检查用户ID')
      } else if (error.response?.status === 400) {
        message.error('不能与自己聊天')
      } else {
        message.error('创建会话失败，请稍后重试')
      }
    }
  }

  // 滚动到底部
  const scrollToBottom = () => {
    // 滚动到消息列表底部
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }

  // 格式化时间
  const formatTime = (timestamp) => {
    if (!timestamp) return '';
    const date = new Date(timestamp)
    if (isNaN(date.getTime())) return '';
    const now = new Date()
    const diffTime = now - date
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

    if (diffDays === 0) {
      return date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      })
    } else if (diffDays === 1) {
      return '昨天 ' + date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      })
    } else {
      return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit' 
      })
    }
  }

  // 处理键盘事件
  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      // 调用发送消息的函数
      handleSendMessage()
    }
  }

  // 消息气泡组件
  const MessageBubble = ({ message }) => {
    // 判断消息是否为自己发送的
    const isOwn = message.sender_id === user.id
    const otherUser = currentConversation?.other_user

    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: isOwn ? 'flex-end' : 'flex-start',
        marginBottom: '16px'
      }}>
        {!isOwn && (
          <Avatar 
            src={otherUser?.avatar_url} 
            icon={<UserOutlined />} 
            style={{ marginRight: '8px' }}
          />
        )}
        <div style={{ maxWidth: '70%' }}>
          <div style={{
            padding: '8px 12px',
            borderRadius: '8px',
            backgroundColor: isOwn ? '#1890ff' : '#f0f0f0',
            color: isOwn ? 'white' : 'black',
            wordBreak: 'break-word'
          }}>
            {message.content}
          </div>
          <div style={{ 
            fontSize: '12px', 
            color: '#999', 
            marginTop: '4px',
            textAlign: isOwn ? 'right' : 'left'
          }}>
            {formatTime(message.created_at)}
          </div>
        </div>
        {isOwn && (
          <Avatar 
            src={user.avatar_url} 
            icon={<UserOutlined />} 
            style={{ marginLeft: '8px' }}
          />
        )}
      </div>
    )
  }

  return (
    <div style={{ 
      marginTop: 64,
      marginLeft: isAuthenticated ? 200 : 0,
      minHeight: 'calc(100vh - 64px)',
      padding: '24px'
    }}>
      <Row gutter={16} style={{ height: 'calc(100vh - 112px)' }}>
        {/* 会话列表 */}
        <Col span={8}>
          <Card 
            title="消息列表" 
            style={{ height: '100%' }}
            styles={{ body: { padding: 0, height: 'calc(100% - 57px)', overflow: 'auto' } }}
          >
            <Spin spinning={loading}>
              {conversations.length === 0 ? (
                <Empty description="暂无消息" style={{ marginTop: '60px' }} />
              ) : (
                <List
                  dataSource={conversations}
                  renderItem={(conversation) => (
                    <List.Item
                      key={conversation.id}
                      onClick={() => setCurrentConversation(conversation)}
                      style={{
                        padding: '12px 16px',
                        cursor: 'pointer',
                        backgroundColor: currentConversation?.id === conversation.id ? '#f0f7ff' : 'transparent'
                      }}
                      className="conversation-item"
                    >
                      <List.Item.Meta
                        avatar={
                          <Badge count={conversation.last_message?.unread_count || 0}>
                            <Avatar 
                              src={conversation.other_user.avatar_url} 
                              icon={<UserOutlined />} 
                            />
                          </Badge>
                        }
                        title={
                          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <span>{conversation.other_user.username}</span>
                            <span style={{ fontSize: '12px', color: '#999' }}>
                              {conversation.last_message
                                ? formatTime(conversation.last_message.created_at)
                                : ''}
                            </span>
                          </div>
                        }
                        description={
                          <div>
                            <div style={{ 
                              color: '#666', 
                              fontSize: '13px',
                              marginBottom: '4px',
                              overflow: 'hidden',
                              whiteSpace: 'nowrap',
                              textOverflow: 'ellipsis'
                            }}>
                              {conversation.last_message
                                ? conversation.last_message.content
                                : ''}
                            </div>
                          </div>
                        }
                      />
                    </List.Item>
                  )}
                />
              )}
            </Spin>
          </Card>
        </Col>

        {/* 消息内容 */}
        <Col span={16}>
          <Card 
            title={currentConversation ? (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Avatar 
                  src={currentConversation.other_user.avatar_url} 
                  icon={<UserOutlined />} 
                  style={{ marginRight: '8px' }}
                />
                <div>
                  <div>{currentConversation.other_user.username}</div>
                </div>
              </div>
            ) : '选择一个对话'}
            style={{ height: '100%' }}
            styles={{ body: { 
              padding: 0, 
              height: 'calc(100% - 57px)',
              display: 'flex',
              flexDirection: 'column'
            }}}
              
          >
            {!currentConversation ? (
              <Empty 
                description="请选择一个对话开始聊天" 
                style={{ 
                  flex: 1,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              />
            ) : (
              <>
                {/* 消息区域 */}
                <div style={{ 
                  flex: 1, 
                  padding: '16px',
                  overflowY: 'auto',
                  borderBottom: '1px solid #f0f0f0'
                }}>
                  {messages.map(message => (
                    <MessageBubble key={message.id} message={message} />
                  ))}
                  <div ref={messagesEndRef} />
                </div>

                {/* 输入区域 */}
                <div style={{ padding: '16px' }}>
                  <Space.Compact style={{ width: '100%' }}>
                    {/* 只有没有currentConversation时才显示发起新对话输入框 */}
                    {!currentConversation && (
                      <Input.Search 
                        placeholder="输入对方用户ID（数字），回车发起新对话" 
                        value={newUserId} 
                        onChange={e => setNewUserId(e.target.value)} 
                        onSearch={handleCreateConversation} 
                        enterButton="发起" 
                        style={{ marginBottom: 16 }} 
                      />
                    )}
                    {/* 有currentConversation时显示消息输入和发送按钮 */}
                    {currentConversation && (
                      <>
                        <TextArea
                          value={messageInput}
                          onChange={(e) => setMessageInput(e.target.value)}
                          onKeyPress={handleKeyPress}
                          placeholder="输入消息..."
                          autoSize={{ minRows: 1, maxRows: 3 }}
                          style={{ flex: 1 }}
                        />
                        <Button 
                          type="primary" 
                          icon={<SendOutlined />}
                          onClick={handleSendMessage}
                          loading={sending}
                          disabled={!messageInput.trim()}
                        >
                          发送
                        </Button>
                      </>
                    )}
                  </Space.Compact>
                </div>
              </>
            )}
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default ChatPage 